<template>
    <div class="container">
        <div class="wrap topBar">
        <span>欢迎来到叩丁狼积分商城</span>
        <ul>
            <li>
                <img src="" alt="">
            </li>
            <li>用户名</li>
            <li>我的鸡腿</li>
            <li>获取鸡腿</li>
            <li>叩丁狼官网</li>
            <li>
                <img src="" alt="">
               <span> 购物车</span>
               <strong>0</strong>
            </li>
        </ul>
    </div>
    </div>
</template>

<script lang='ts' setup>
import {  } from "vue"
    
</script>
 
<style lang = "less" scoped>
.container{
    width: 100%;
    background-color:#242b39;
}
    .wrap{
        width: 1200px;
        margin: 0 auto;
    }
    .topBar{
        height: 40px;
        line-height: 40px;
        // background-color: pink;
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        align-items: center;
        span{
            margin-left: 10px;
            color: white;
            font-weight: 700;
        }
        ul{
           color: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            li{
                &:nth-child(1){
            
                
                    img{
                        display: block;
                        height: 25px;
                        width: 25px;
                        background-color: #fff;
                    }
                }
                list-style: none;
               
                margin-right: 10px;
                &:nth-child(6){ 
                    align-items: center;
                    width: 150px;
                    display: flex   ;
                    justify-content:space-around;
                    background-color: #0a328e;
                    img{
                        height: 30px;
                        width: 30px;
                        display: block;
                        background-color: #fff;
                        border-radius: 50%;

                    }
                    span{
                        font-size: 15px;
                    }
                    strong{
                        color:white;
                        height: 25px;
                        width: 25px;
                        border-radius: 50%;
                        background-color: red;
                        text-align: center;
                        line-height: 25px;
                    }
                    
                }
            }
        }
    }
   
</style>